<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css" type="text/css">
    <link rel="stylesheet" href="../../css/adopt/catInfoCss.css" type="text/css">
    <link rel="stylesheet" href="../../css/adopt/indexCss.css" type="text/css">
    <style>
        body {

        body {
            /* background-image: url("../../imgs/personal-personal-center-bg.gif"); */

            /* background-size: 100%  100%;

            height:900px;
              background-position:  100px 0px;
             background-repeat: no-repeat;
             */
        }

        .smallbox {
            background-image: url("../../imgs/personal-personal-center-bg.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: -20px;
            opacity: 0.7;
        }

        .headerL {
            margin-top: 50px;
        }

        .headerR {
            margin-top: 50px;

        }

        .milder {
            margin-top: 70px;
            border: 0.5px solid lightgray;
            /* color:cornsilk; */
        }

        table {
            margin-top: 40px;

        }

        .bigbox {

            margin: auto;


        }

        input {
            background-color: rgba(207, 203, 203, 0.1);
            color: white;
            /* border:1px solid cyan;
             */
            /* opacity: 0.1; */
            /* color:cyan; */
        }

        span {
            /* background-color:rgba(207, 203, 203,0.7); */
        }

        button {
            color: chocolate;
            margin-left: 30px;
            background-color: coral;
        }

        a {
            color: black;

        }

        a:hover {
            text-decoration: none;
            color: darkgoldenrod;
        }

        .footer {
            /* width:50%;
            height:150px;
            border-radius: 50%; */

            /* background-color:	#F5F5F5; */
            margin: auto;
            padding: 20px;
        }


    </style>

</head>
<body>
<ul class="layui-nav" id="header">
    <div class="container">
        <li class="layui-nav-item"><a href="/MagicFrog/index.html"><b style="font-size: 20px;">膜蛤猫舍</b></a></li>
        <li class="layui-nav-item layui-this"><a href="/MagicFrog/views/foster/foster.html">寄养猫咪</a></li>
        <li class="layui-nav-item"><a href="/MagicFrog/views/adopt/adoptCat.html">领养猫咪</a></li>
        <li class="layui-nav-item"><a href="/MagicFrog/views/personal/aboutus.html">关于我们</a></li>
        <ul class="navbar-right">
            <li class="layui-nav-item">
                <a href="/MagicFrog/views/personal/personal-center.html">个人中心</a>
            </li>
            <li class="layui-nav-item" lay-unselect="">
                <a href="/MagicFrog/views/personal/personal-center.html"><img src="//t.cn/RCzsdCq"
                                                                              class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="#">修改信息</a></dd>
                    <dd><a href="#">安全管理</a></dd>
                    <dd><a href="#">退了</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="#contactus">联系我们</a></li>
        </ul>
    </div>
</ul>
<div class="bigbox" style="width:100%;height:100%">
    <!-- <div class="smallbox"> -->
    <!-- 个人资料---开始 -->
    <!-- 个人资料----结束 -->
    <!-- </div> -->
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img src="../../imgs/personal-head.gif" class="img-circle"
                     style="border-radius:50%; width:200px;height:200px;" id="pic">
                <br>
                <br>
                <h3></h3><span style="color:black;padding-left: 50px;font-size: 20px;">暖心世界</span></h3><br>
                <div class="tt" style="margin-top:30px;margin-left:-10px;">
                    <span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span class="glyphicon glyphicon-cloud"></span>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                            style="border-radius: 50%;width：30px;height:30px;"><i class="layui-icon"></i></button>
                    <!-- 个人信息设置---开始 -->
                    <div class="headerR" style="">
                        <li><a href="#" onclick="f('ycbc')" ;>
                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i
                                    class="layui-icon">个人设置</i></button>
                        </a></li>

                    </div>

                    <!-- 个人信息---结束 -->
                    <!-- 关注follow---开始 -->
                    <div class="pull-right pull-none-xs text-center">
                        <div class="col-md-6">
                            <a href class="m-b-md inline m">
                                <span class="h3 block font-bold">2k</span><br>
                                <small>Followers</small>
                            </a></div>
                        <div class="col-md-6">
                            <a href class="m-b-md inline m">
                                <span class="h3 block font-bold">250</span><br>
                                <small>Following</small>
                            </a>
                        </div>
                    </div>
                    <!-- 关注follow----结束 -->


                    <!-- 系统消息  对应的隐藏信息 ----开始 -->
                    <div id="ycbc" class="" style="display: none;margin-top:100px; width:260px;">
                        <div class="row">
                            <div class="footer">
                                <!-- <span style="font-size:20px;align-content: center;margin:auto;">
                                        暹罗猫好养吗？暹罗猫的性格<br>
                                        猫咪会假装睡觉吗<br>
                                        猫咪的牙齿有多少颗<br>
                                </span> -->

                                <blockquote class="layui-elem-quote layui-quote-nm">
                                    姓名：<input type="text">
                                    <span class="layui-badge-dot"></span></blockquote>

                                <blockquote class="layui-elem-quote layui-quote-nm">
                                    邮箱：<input type="text">
                                    <span class="layui-badge-dot layui-bg-orange"></span></blockquote>

                                <blockquote class="layui-elem-quote layui-quote-nm">
                                    地址：<input type="text">
                                    <span class="layui-badge-dot layui-bg-green"></span></blockquote>
                                <blockquote class="layui-elem-quote layui-quote-nm">
                                    号码：<input type="text">
                                    <span class="layui-badge-dot layui-bg-cyan"></span></blockquote>


                                <span class="layui-badge-dot layui-bg-orange"></span>
                                <span class="layui-badge-dot layui-bg-green"></span>
                                <span class="layui-badge-dot layui-bg-cyan"></span>
                                <span class="layui-badge-dot layui-bg-blue"></span>
                                <span class="layui-badge-dot layui-bg-black"></span>
                                <span class="layui-badge-dot layui-bg-gray"></span>
                                </blockquote>
                            </div>
                        </div>

                    </div>
                    <!-- 信息-----结束 -->
                </div>
            </div>
            <div class="col-md-8">

                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">评论回复</li>
                        <a href="my-orders.html">
                            <li>我的订单<span class="layui-badge layui-bg-orange">9</span></li>
                        </a>
                        <li>系统消息</li>

                    </ul>

                    <!-- 跳转按钮---结束 -->

                    <!-- 评论  回复----开始 -->

                    <div class="footer">
                        <div class="padder">


                            <div class="streamline b-l b-info m-l-lg m-b padder-v" style="padding:10px;">
                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md" style="padding-left:8px;">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="..." style="border-radius: 50%;">
                                    </a>
                                    <div class="m-l-lg">
                                        <div class="m-b-xs" style="padding:10px;">
                                            <a href class="h4" style="padding:10px;">John smith</a>
                                            <span class="text-muted m-l-sm pull-right">
                              Just now
                            </span>
                                        </div>
                                        <br>
                                        <div class="m-b">
                                            <div>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam
                                                nonummy nibh euismod tincidunt ut laoreet. ullamcorper sodales nisi nec
                                                adipiscing elit. Morbi id neque quam. Aliquam sollicitudin
                                            </div>
                                            <br>
                                            <div class="m-t-sm">
                                                <span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-refresh"></span>&nbsp;13
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>

                                <!-- .comment-reply -->

                                <div class="m-l-lg" style="padding:30px;">

                                    <a class="pull-left thumb-sm avatar" style="padding-left:8px;">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="..." style="border-radius: 50%;">
                                    </a>
                                    <div class="m-l-xxl panel b-a">
                                        <div class="panel-heading pos-rlt">
                                            <span class="arrow left pull-up"></span>
                                            <span class="text-muted m-l-sm pull-right">
                              10m ago
                            </span>
                                            <a href>Mika Sam</a><br><br>
                                            Report this comment is helpful
                                        </div>
                                    </div>
                                </div>
                                </li>
                                <!-- / .comment-reply -->
                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md" style="padding-left:8px;">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="...">
                                    </a>
                                    <div class="m-l-lg m-b-lg panel b-a bg-light lt">
                                        <div class="panel-heading pos-rlt b-light">
                                            <span class="arrow arrow-light left"></span>
                                            <a href>By me</a>
                                            <span class="text-muted m-l-sm pull-right">
                              1h ago
                            </span>
                                        </div>
                                        <div class="panel-body">
                                            <div>This comment was posted by you.</div>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="...">
                                    </a>
                                    <div class="m-l-lg m-b-lg">
                                        <div class="m-b-xs">
                                            <a href class="h4" style="padding-left:8px; ">Jessica</a>
                                            <span class="text-muted m-l-sm pull-right">
                              3h ago
                            </span>
                                        </div>
                                        <br>
                                        <div class="m-b">
                                            <div class="m-b">Cecteter adipiscing elit, sed diam nonummy nibh euismod
                                                tincidunt ut laoreet. ullamcorper sodales nisi nec adipiscing elit.
                                                Morbi id neque quam. Aliquam sollicitudin
                                            </div>
                                            <img src="../../imgs/personal-personal-center-pic.gif"
                                                 style="width:430px;height:230px;padding:30px;"
                                                 class="b b-a wrapper-xs bg-white img-responsive">
                                            <div class="m-t-sm">
                                                <span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-refresh"></span>&nbsp;13
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="re" style="margin-top:20px;padding:10px;">
                                    <a class="pull-left thumb-sm avatar m-l-n-md">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="...">
                                    </a>
                                    <div class="m-l-lg m-b-lg">
                                        <div class="m-b-xs">
                                            <a href class="h4" style="padding-left:8px; ">Fisio</a>
                                            <span class="text-muted m-l-sm pull-right">
                              4h ago
                            </span>
                                        </div>
                                        <br>
                                        <div>
                                            <div class="m-b" style="padding-top:10px;">Diam nonummy nibh euismod
                                                tincidunt ut laoreet. ullamcorper sodales nisi nec adipiscing elit.
                                                Morbi id neque quam. Aliquam sollicitudin
                                            </div>
                                            <div class="panel panel-default m-t-md m-b-n-sm pos-rlt">
                                                <form>
                                                    <div class="m-b" style="height:50px;"></div>
                                                </form>
                                                <div class="panel-footer bg-light lter">
                                                    <button class="btn btn-info pull-right btn-sm">Comment</button>
                                                    <ul class="nav nav-pills nav-sm">
                                                        <li><a href><i class="fa fa-camera text-muted"></i></a></li>
                                                        <li><a href><i class="fa fa-video-camera text-muted"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             alt="...">
                                    </a>
                                    <div class="m-l-lg panel b-a">
                                        <div class="panel-heading pos-rlt b-b b-light">
                                            <span class="arrow left"></span>
                                            <a href>Peter</a>
                                            <label class="label bg-light m-l-xs">VIP</label>
                                            <span class="text-muted m-l-sm pull-right">
                              9h ago
                            </span>
                                        </div>
                                        <div class="panel-body">
                                            <!-- <blockquote> -->
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                                erat a ante.</p>
                                            <small>Someone famous in <cite title="Source Title">Source
                                                Title</cite></small>
                                            <!-- </blockquote> -->
                                            <div>Lorem ipsum dolor sit amet, consecteter adipiscing elit...</div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 一个评论回复---开始 -->
                                <div style="margin-top:40px;">
                                    <a class="pull-left thumb-sm avatar m-l-n-md" style="padding-left:8px;">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="..." style="border-radius: 50%;">
                                    </a>
                                    <div class="m-l-lg">
                                        <div class="m-b-xs" style="padding:10px;">
                                            <a href class="h4" style="padding:10px;">John smith</a>
                                            <span class="text-muted m-l-sm pull-right">
                              Just now
                            </span>
                                        </div>
                                        <br>
                                        <div class="m-b">
                                            <div>Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam
                                                nonummy nibh euismod tincidunt ut laoreet. ullamcorper sodales nisi nec
                                                adipiscing elit. Morbi id neque quam. Aliquam sollicitudin
                                            </div>
                                            <br>
                                            <div class="m-t-sm">
                                                <span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-refresh"></span>&nbsp;13
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>

                                <!-- .comment-reply -->

                                <div class="m-l-lg" style="padding:30px;">

                                    <a class="pull-left thumb-sm avatar" style="padding-left:8px;">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="..." style="border-radius: 50%;">
                                    </a>
                                    <div class="m-l-xxl panel b-a">
                                        <div class="panel-heading pos-rlt">
                                            <span class="arrow left pull-up"></span>
                                            <span class="text-muted m-l-sm pull-right">
                              10m ago
                            </span>
                                            <a href>Mika Sam</a>
                                            Report this comment is helpful
                                        </div>
                                    </div>
                                </div>
                                </li>
                                <!-- / .comment-reply -->
                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md" style="padding-left:8px;">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="...">
                                    </a>
                                    <div class="m-l-lg m-b-lg panel b-a bg-light lt">
                                        <div class="panel-heading pos-rlt b-light">
                                            <span class="arrow arrow-light left"></span>
                                            <a href>By me</a>
                                            <span class="text-muted m-l-sm pull-right">
                              1h ago
                            </span>
                                        </div>
                                        <div class="panel-body">
                                            <div>This comment was posted by you.</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 一个评论回复----结束 -->

                                <!-- 一个评论回复---开始 -->

                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             class="img-circle" alt="...">
                                    </a>
                                    <div class="m-l-lg m-b-lg">
                                        <div class="m-b-xs">
                                            <a href class="h4" style="padding-left:8px; ">Jessica</a>
                                            <span class="text-muted m-l-sm pull-right">
                              3h ago
                            </span>
                                        </div>
                                        <br>
                                        <div class="m-b">
                                            <div class="m-b">Cecteter adipiscing elit, sed diam nonummy nibh euismod
                                                tincidunt ut laoreet. ullamcorper sodales nisi nec adipiscing elit.
                                                Morbi id neque quam. Aliquam sollicitudin
                                            </div>
                                            <img src="../../imgs/personal-personal-center-pic.gif"
                                                 style="width:430px;height:230px;padding:30px;"
                                                 class="b b-a wrapper-xs bg-white img-responsive">
                                            <div class="m-t-sm">
                                                <span class="glyphicon glyphicon-share-alt"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-star"></span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span class="glyphicon glyphicon-refresh"></span>&nbsp;13
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 一个评论回复----结束 -->


                                <!-- 一个评论回复---开始 -->
                                <div>
                                    <a class="pull-left thumb-sm avatar m-l-n-md">
                                        <img src="../../imgs/24.jpg" style="width:30px;height:30px;border-radius: 50%;"
                                             alt="...">
                                    </a>
                                    <div class="m-l-lg panel b-a">
                                        <div class="panel-heading pos-rlt b-b b-light">
                                            <span class="arrow left"></span>
                                            <a href>Peter</a>
                                            <label class="label bg-light m-l-xs">VIP</label>
                                            <span class="text-muted m-l-sm pull-right">
                              9h ago
                            </span>
                                        </div>
                                        <div class="panel-body">
                                            <!-- <blockquote> -->
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                                erat a ante.</p>
                                            <small>Someone famous in <cite title="Source Title">Source
                                                Title</cite></small>
                                            <!-- </blockquote> -->
                                            <div>Lorem ipsum dolor sit amet, consecteter adipiscing elit...</div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 一个评论回复----结束 -->
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 评论  回复----结束 -->


        <!-- 底部 -->
        <!-- 底部 -->
        <div class="container">
            <a href="#" name="contactus"></a>
            <div>
                <h3 id="welcome">联系我们</h3>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <h4>
                        <i class="	glyphicon glyphicon-map-marker"></i>&nbsp;&nbsp;Location
                    </h4>
                    <p>345 Setwant natrer,</p>
                    <p>Metropolitan, Italy.</p>
                </div>
                <div class="col-md-4">
                    <h4>
                        <i class="glyphicon glyphicon-earphone"></i>&nbsp;&nbsp;PHONE
                    </h4>
                    <p>+1(401) 1234 567.</p>
                    <p>+1(804) 4261 150.</p>
                </div>
                <div class="col-md-4">
                    <h4>
                        <i class="glyphicon glyphicon-envelope"></i>&nbsp;&nbsp;E-MAIL
                    </h4>
                    <p>
                        <a href="mailto:info@example.com">Example1@gmail.com</a>
                    </p>
                    <p>
                        <a href="mailto:info@example.com">Example2@gmail.com</a>
                    </p>
                </div>
            </div>
        </div>


        <!-- 隐藏----开始 -->
        <script>
            function f(a) {
                var obj = document.getElementById(a);
                if (obj.style.display == "") {
                    obj.style.display = "none";
                } else {

                    obj.style.display = "";
                }
            }
        </script>
        <!-- 隐藏-----结束 -->
        <!-- 滑动图片变大------开始 -->
        <script>
            var pic = document.getElementById("pic");
            pic.onmouseover = function () {
                this.style.width = 250 + 'px';
                this.style.height = 250 + 'px';
            }
            pic.onmouseout = function () {
                this.style.width = 200 + 'px';
                this.style.height = 200 + 'px';
            }
        </script>
        <!-- 滑动图片变大-----结束 -->


        <script src="../../plugins/jquery/jquery.min.js"></script>
        <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
        <script src="../../plugins/layui/layui.js"></script>

        <script src="../../plugins/layui/css/layui.css"></script>
        <script src="../../plugins/layui/css/layui.mobile.css"></script>
</body>
</html>